<template>
  <van-search class="both1" v-if="show" show-action placeholder="请输入搜索关键词" @click-left-icon="back" left-icon="arrow-left"
    v-model="state.key">
    <template #action>
      <div @click="search">搜索</div>
    </template>
  </van-search>
  
  <van-search v-else placeholder="请输入搜索关键词" @click="change">
  </van-search>

  <div class="another" v-if="show">
    <div class="another-box">
      <div class="another-content">
        <div class="history">
          <div class="history-content-head">
            <span>历史搜索</span>
            <span><van-icon name="delete-o" /></span>
          </div>
          <div class="history-content-body">
            <div class="history-content-body-content">
              <span><van-icon name="bag-o" /> 夏日穿搭推荐</span>
            </div>
            <div class="history-content-body-content">
              <span><van-icon name="bag-o" /> 推荐</span>
            </div>
            <div class="history-content-body-content">
              <span><van-icon name="bag-o" /> 夏日推荐</span>
            </div>
            <div class="history-content-body-content">
              <span><van-icon name="bag-o" /> 夏日穿搭推荐</span>
            </div>
            <div class="history-content-body-content">
              <span><van-icon name="bag-o" /> 夏日穿搭推荐</span>
            </div>


          </div>
        </div>
        <div class="guess">
          <div class="guess-content-head">
            <span>猜你想搜</span>
            <span><button class="click-style" @click="goChat">click！ AI教穿搭！</button></span> 
          </div>
          <div class="guess-content-body">
            <div class="guess-content-body-content">
              <span> 夏日穿搭推荐</span>
            </div>
            <div class="guess-content-body-content">
              <span> 推荐</span>
            </div>
            <div class="guess-content-body-content">
              <span> 夏日推荐</span>
            </div>
            <div class="guess-content-body-content">
              <span> 夏日穿搭推荐</span>
            </div>
            <div class="guess-content-body-content">
              <span> 夏日穿搭推荐</span>
            </div>


          </div>
        </div>
        <div class="hot-search">
          <div class="hot-serach-head"><span>热搜榜单</span></div>
          <div class="hot-serach-list">
            <ul>
              <li><span>1</span><span>学会这套，七月就脱单</span></li>
              <li><span>1</span><span>学会这套，七月就脱单</span></li>
              <li><span>1</span><span>学会这套，七月就脱单</span></li>
              <li><span>1</span><span>学会这套，七月就脱单</span></li>
              <li><span>1</span><span>学会这套，七月就脱单</span></li>
              <li><span>1</span><span>学会这套，七月就脱单</span></li>
              <li><span>1</span><span>学会这套，七月就脱单</span></li>
            </ul>
          </div>
        </div>
      </div>

    </div>
  </div>
  <div class="box" v-else>
    <div class="box warp">
      <van-tabs swipeable>
        <van-tab title="推荐">
          <Suggestion />
        </van-tab>
        <van-tab title="关注">内容 2</van-tab>
        <van-tab title="大牌">内容 3</van-tab>
        <van-tab title="运动健身">内容 4</van-tab>
        <van-tab title="国风">内容 5</van-tab>
        <van-tab title="数码">内容 6</van-tab>
        <van-tab title="手表">内容 6</van-tab>
        <van-tab title="潮鞋">内容 6</van-tab>

      </van-tabs>
    </div>
    <!-- <route-view></route-view> -->
    <div class="box-body"></div>
    <Foot />
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import Foot from '@/components/footBar.vue'
import Suggestion from '@/components/pages/suggestion.vue'
import {useRouter} from 'vue-router'
const router = useRouter()
const state = reactive({
  key: '',
  show: false
})

let show = ref(false)
const change = () => {

  show.value = true
}
const back = () => {
  show.value = false
}
const search = () =>{
  router.push({path:'/search',query:{key:state.key}})
 
}
const goChat = () => {
  router.push('/chat')
}

</script>

<style lang="less" scoped>

.another {
  margin-top: 58px;
  overflow: auto;
  padding: 0 20px;

  .another-box {
    margin-top: 10px;
    // background-color: rgb(237, 236, 236);
  }

  .another-content {
    margin-top: 10px;

    .history {
      margin-top: 20px;

      .history-content-head {
        display: flex;
        justify-content: space-between;
        font-size: 15px;
      }

      .history-content-body {
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;

        .history-content-body-content {
          height: 25px;
          padding-right: 5px;

          span {
            background: #f5f5f9;
            height: 25px;
            font-size: 15px;
            line-height: 25px;
            padding: 0 5px;
          }

        }

      }
    }

    .guess {
      margin-top: 20px;

      .guess-content-head {
        display: flex;
        justify-content: space-between;
        font-size: 15px;
        .click-style{
          border: 0px;
          background-color: #ffffff;
          border-radius: 1rem;
        }
      }

      .guess-content-body {
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;

        .guess-content-body-content {
          height: 25px;
          padding-right: 5px;

          span {
            background: #f5f5f9;
            height: 25px;
            font-size: 15px;
            line-height: 25px;
            padding: 0 5px;
          }

        }

      }
    }

    .hot-search {
      margin-top: 30px;

      .hot-serach-head {
        span {
          font-size: 15px;
        }
      }

      .hot-serach-list {
        margin-top: 10px;
        width: 100%;

        border: 1px solid #fdebe5;
        border-radius: 5px;
        background: linear-gradient(#fef3f0 1%, 5%, #ffffff 90%);

        ul {
          li {
            font-size: 15px;
            margin-top: 15px;
            margin-bottom: 15px;

            span {
              margin-left: 5px;
              margin-right: 15px;
            }


          }
        }
      }
    }
  }
}

.box {
  margin-top: 58px;
  margin-bottom: 50px;
}
</style>
<style>
.van-search {
  width: 100%;
  position: fixed;
  top: 0;
}
</style>